<template>
  <div class="wx-container">
    <div class="title">
      <img src="@/assets/logo_back.png" class="title_back" @click="handleBack" />
      <span class="title_text">微信扫描二维码登录</span>
    </div>
    <div class="qrcode-wrap">
      <div id="login_container"></div>
    </div>
  </div>
</template>

<!-- 
* 【微信登录说明】
* 1.微信二维码登录流程：
*   1.1.生成微信二维码（微信原生生成、失败后再次生成，或者根据微信二维码下面的提示：提示用户刷新浏览器）
*   1.2.扫描二维码成功，【未登录模式】跳转到login_jump.html（根据env和path中转跳转到不同的环境）【再次重新进入系统】
*   1.3.扫码成功
*   1.3.1已绑定，获取信息 跳转到首页
*   1.3.2未绑定，带着openId跳转到绑定账号页面 -> 跳转登录
*
* 2.用户信息微信二维码绑定流程：
*   2.1.生成微信二维码（每次打开页面重新生成）
*   2.2.扫描二维码成功，跳转到login_jump.html，【已登录模式】【再次重新进入系统】
*   2.3.打开用户信息（还原绑定前打开用户信息弹框）
*   2.4.已绑定，提示绑定其他账户
*   2.5.未绑定，提示绑定成功
*
-->
<script setup>
  import { onMounted } from 'vue'
  import { getCreateCodeUrlParam } from '@/api/user'

  const emit = defineEmits(['changeIndex'])

  // 返回上一步
  const handleBack = () => {
    emit('changeIndex', 1)
  }

  // 获取微信二维码
  const initWxQrcode = () => {
    const env = import.meta.env.VITE_ENV
    getCreateCodeUrlParam({ redirectUrl: `https://image.qichengcx.com/html/login_jump.html?env=${env}&path=login` }).then((res) => {
      const data = res.result
      new WxLogin({
        id: 'login_container',
        appid: data.appid,
        scope: data.scope,
        redirect_uri: data.redirectUrl,
        state: data.state,
        stylelite: 1, // 新样式无效
        fast_login: 0,
        href: 'data:text/css;base64,QGNoYXJzZXQgInV0Zi04IjsKLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDI4MHB4OyBib3JkZXItcmFkaXVzOiAxNnB4O2JvcmRlcjogMXB4IHNvbGlkICNDNUM2Q0Q7fQouaW1wb3dlckJveCAudGl0bGUge2Rpc3BsYXk6IG5vbmU7fQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIzOHB4O30KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO3BhZGRpbmc6IDB9Cg==',
      })
    })
  }

  onMounted(() => {
    initWxQrcode()
  })

  defineExpose({ initWxQrcode })
</script>

<style lang="less" scoped>
  .wx-container {
    width: 320px;
    margin: 0 auto;

    .title {
      display: flex;
      align-items: center;
      margin-left: -60px;

      &_back {
        margin-right: 12px;
        width: 48px;
        height: 48px;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
      &_text {
        font-size: 32px;
        font-weight: 600;
        color: #1e1e1e;
      }
    }
  }

  .qrcode-wrap {
    margin-top: 9px;
  }

  .conclusion {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 15px;
    }
    p {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #1e1e1e;
    }
  }
</style>
